import { useContext } from "react";
import Editor from "./Editor";
import FileNameList from "./FileNameList";
import { PlaygroundContext } from "../../PlaygroundContext";
import { debounce } from 'lodash-es'

export default function index() {

    const { 
        files ,
        setFiles , 
        selectedFileName 
    } = useContext(PlaygroundContext)

    const {
		theme
	} = useContext(PlaygroundContext)

    const file = files[selectedFileName]

    function onEditorChange(value?:string) {
        files[file.name].value = value!
        setFiles({...files})
    }


	return (
		<div className="columnContainer" style={{ height: "100%" }}>
			<FileNameList />
			<Editor 
                file={file} 
                onChange={debounce(onEditorChange , 500)}  
                options={{theme:`vs-${theme}`}}
            />
		</div>
	);
}
